<template>
  <div>
    <div class="page-body" v-loading="loading">
      <div class="page-header">
        <el-input placeholder="请输入查询字段" class="page-header-query" v-model="searchValue"
          style="width:180px;margin-right:10px" @keyup.enter.native="onSearch">
          <template #append>
            <el-button :icon="Search" @click="onSearch"></el-button>
          </template>
        </el-input>
      </div>
      <div class="page-con">
        <div class="page-th">
          <div class="page-tree-row page-tree-row-text">区域名称</div>
        </div>
        <div class="page-tbody">
          <el-tree-v2 ref="tree" :data="tableList" :props="treeProps" draggable :expand-on-click-node="false"
            :highlightCurrent="true" node-key="Id" check-strictly @check="checkChange" @node-click="nodeClick"
            :height="500">
            <template #default="{ node, data }">
              <div class="custom-tree-node" :class="{ 'custom-tree-node-lock': data.IsLock }" @dblclick="dblclick(data)"
                @click="getDealerCmpList(data)">
                <div class="page-tree-row page-tree-row-text">
                  <!-- <menu-icon :src="data.Icon" style="margin-right:10px"></menu-icon> -->
                  <div v-html="data.Name"></div>
                </div>
              </div>
            </template>
          </el-tree-v2>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "orgComp",
})
</script>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import { arrayToTree } from "@/config/globalMethod"
import { OrgDataClass, docType } from "./config";
import { request } from "@/utils/axios";
import { appState } from "@/store/app"
import { Search } from '@element-plus/icons-vue'
import { countCharacterLen } from "@/config/globalMethod"
import { ElMessage } from "element-plus";
let menuActionType = ref(appState.menuActionMap[docType])
if (menuActionType.value == undefined) {
  menuActionType.value = {
    add: true,
    delete: true,
    sort: true,
    update: true,
  }
}

let emit = defineEmits<{
  (e: "DealerCmpList", value: any): void;
  (e: "CheckedKeys", value: any): void
}>()
let treeProps = ref({
  value: 'Id',
  label: 'Name',
  children: 'children',
})

let tableList = ref<OrgDataClass[]>([]);
/**
 * 默认选中的行
 */
let currentKey = ref<number>(1)
/**
 * 当前页数
 */
let currentPage = ref(1);
/**
 * 搜索内容
 */
let searchValue = ref<any>(null)


/**
 * 加载数据
 */
let loading = ref(false);


/**
 * 定义tree组件
 */
let tree = ref()
/**
 * 获取列表
 */
function getData() {
  loading.value = true;
  request("/Query/Get", {
    DocType: docType,
    ActionType: "MeRegionOrg",
    ApiType: "SingleList",
    Searchv: searchValue.value
  })
    .then((res: any) => {
      if (res.length > 0) {
        let newList = res.sort(function (a: any, b: any) {
          return a.SortNum - b.SortNum;
        });
        let resList = arrayToTree(newList)

        tableList.value = resList.map((item: any) => {
          return new OrgDataClass(item);
        });
        currentKey.value = tableList.value ? tableList.value[0].Id : 0
        nextTick(() => {
          tree.value.setCurrentKey(tableList.value ? tableList.value[0].Id : 0)
          nowTreeNode.value = tableList.value[0] || []
          getDealerCmpList(tableList.value[0])
        })
      } else {
        tableList.value = []
        getDealerCmpList("-1")
      }

    })
    .finally(() => {
      loading.value = false;
    });
}
/**
 * 当点击搜索的时候 
 */
function onSearch() {
  let searchValueLen = countCharacterLen(searchValue.value)
  if (searchValueLen == 1) {
    ElMessage.warning("请输入两位以上搜索内容")
  } else {
    currentPage.value = 1;
    getData();
  }
}

//选中的数据行
let selectList = ref({})
/**
 * 复选框选中
 */
function checkChange(data: any, checkedList: any) {
  selectList.value = {
    Id: data.Id,
    UnionGuid: data.UnionGuid
  }
}
/**
 * 节点选中
 */
let nowTreeNode = ref()
function nodeClick(TreeNode: any) {
  nowTreeNode.value = TreeNode
}
function dblclick(row: any) {
  emit("CheckedKeys", row)
}


/**
 * 单击行列表
 */
function getDealerCmpList(row?: OrgDataClass) {
  emit("DealerCmpList", row)
}

/**
 * ====================
 *  页面初始化
 * ====================
 */
getData();

</script>

<style lang="less" scoped>
.page-body {
  height: 100%;
  width: 100%;

  .el-tree {
    height: 100%;
  }

  /deep/ .el-tree-node {
    height: 30px;
  }

  /deep/ .el-tree-node__content {
    height: auto;
  }
}

@borderColor: rgb(221, 221, 221);

.page-header {
  height: 44px;
  padding: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.page-con {
  height: calc(100% - 44px);
  // min-width: 650px;
}

.page-th {
  width: 100%;
  display: flex;
  font-size: 13px;
  height: 38px;
  font-weight: bold;
  border-bottom: 1px solid @borderColor;
  border-left: 1px solid @borderColor;
  background-color: #f5f5f5;
}

.page-tbody {
  height: 100%;
  overflow: overlay;
}

.custom-tree-node {
  border-bottom: 1px solid @borderColor;
  border-top: 1px solid @borderColor;
  border-left: 1px dotted @borderColor;
  margin-top: -1px;
  font-size: 13px;
  width: 100%;
  height: 26px;
  display: flex;
}

.custom-tree-node-lock {
  color: red;
}

.page-tree-row {
  padding: 5px 10px;
  border-right: 1px solid @borderColor;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-tree-row-text {
  flex-grow: 1;
  display: flex;
}

.page-tree-row-img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
</style>
